import { useState } from "react";
import { Form, Radio } from 'antd';

type Props = {
    onConfig: (config: any) => void;
};

export default ({ onConfig }: Props) => {

    const [config, setConfig] = useState<any>({
        allowDiagonal: true,
        dontCrossCorners: false,
    });

    const [form] = Form.useForm();

    return (
        <div>
            <Form
                layout={"horizontal"}
                form={form}
                initialValues={{
                    allowDiagonal: true,
                    dontCrossCorners: false,
                }}
                onValuesChange={(values) => {
                    const merge = {...config, ...values};
                    setConfig(merge);
                    onConfig?.(merge);
                }}
            >
                <Form.Item label="对角策略" name='diagonalMovement'>
                    <Radio.Group>
                        <Radio value="1">Always</Radio>
                        <Radio value="2">Never</Radio>
                        <Radio value="3">IfAtMostOneObstacle</Radio>
                        <Radio value="4">OnlyWhenNoObstacles</Radio>
                    </Radio.Group>
                </Form.Item>
            </Form>
        </div>
    );
}
